<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI Free</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
	<style>
	.container_banner {
		background-color: #1abc9c;
		color: #d1f2eb;
		margin-left: 42px;
		min-height: 26px;
		padding: 0 30px 2px;
		text-align:center;
		margin-bottom:20px;
	}
	.radio_inline {
		display: inline-block;
		margin-top: 0;
		margin-left: 40px;
		vertical-align: bottom;
		cursor:pointer;
	}
.container_banner h3 {
	color:#fff;
}
.button {
    -webkit-transition-property: background, color;
	-moz-transition-property: background, color;
	-o-transition-property: background, color;
	transition-property: background, color;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background: #13C6F5;
	color: white;
	text-shadow: none;
	border: none;
	-webkit-border-radius: 200px;
	-moz-border-radius: 240px;
	-ms-border-radius: 240px;
	-o-border-radius: 240px;
	border-radius: 240px;
	width: 100px;
	line-height: 100px;
	height: 100px;
	padding: 0px;
	border-width: 4px;
	font-size: 28px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	font-weight: 300;	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;	
	margin: 0;
	text-decoration: none;
	text-align: center;
	
}
.headline {
	padding: 73px 0 110px;
	text-align: center;
}
.logo small {
  color: rgba(52, 73, 94, 0.30000000000000004);
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  padding-top: 5px;
}

	</style>
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
		 
    </div>
	 <div class="container">
		<div class="row">
			<div class="headline">
				<h1 class="logo">
				  <div class="logo"></div>
				  剩余人生
				  <small>这可不是闹着玩的！</small>
				</h1>
			</div>
		</div>
		<div class="row" style="position:relative;">
		  <span class="button" style="position:absolute;z-index:999;top:-20px;left:20px;">第1问</span>
		  
          <div class="col-md-12 container_banner">
			<h3 class="">请选择你的性别：</h3>
		  </div>
		</div>
		<div class="row">
		  <div class="col-md-4"></div>
		  <div class="col-md-4" style="text-align:center">
				
				<label class="radio radio_inline">
				  <input type="radio" name="group1" value="1" data-toggle="radio">
				  帅哥
				</label>

				<label class="radio radio_inline">
				  <input type="radio" name="group1" value="2" data-toggle="radio" checked>
				  美女
				</label>
			
		  </div>
		  <div class="col-md-4"></div>
		</div>
		<!-------------->
		<div class="row">
          <div class="col-md-12 container_banner">
			<h3 class="">Get Flat UI Pro</h3>
		  </div>
		</div>
		<div class="row">
		  <div class="col-md-4"></div>
		  <div class="col-md-4" style="text-align:center">
			
				<label class="radio radio_inline">
				  <input type="radio" name="group1" value="1" data-toggle="radio">
				  帅哥
				</label>

				<label class="radio radio_inline">
				  <input type="radio" name="group1" value="2" data-toggle="radio" checked>
				  美女
				</label>
			
		  </div>
		  <div class="col-md-4"></div>
		</div>
		<!-------------->
        <div class="row">
          <div class="col-md-4">
            <div class="footer-banner">
              <h3 class="footer-title">Get Flat UI Pro</h3>
              <ul>
                <li>Tons of Basic and Custom UI Elements</li>
                <li>A Lot of Useful Samples</li>
                <li>More Vector Icons and Glyphs</li>
                <li>Pro Color Swatches</li>
                <li>Bootstrap Based HTML/CSS/JS Layout</li>
              </ul>
              Go to: <a href="http://designmodo.com/flat" target="_blank">designmodo.com/flat</a>
            </div>
          
          </div> <!-- /col-md-6 -->
		  <div class="col-md-2">
		  </div>
          <div class="col-md-4">
            <div class="footer-banner">
              <h3 class="footer-title">Get Flat UI Pro</h3>
              <ul>
                <li>Tons of Basic and Custom UI Elements</li>
                <li>A Lot of Useful Samples</li>
                <li>More Vector Icons and Glyphs</li>
                <li>Pro Color Swatches</li>
                <li>Bootstrap Based HTML/CSS/JS Layout</li>
              </ul>
              Go to: <a href="http://designmodo.com/flat" target="_blank">designmodo.com/flat</a>
            </div>
          </div>
        </div>
      </div>
    <!-- /.container -->


    <!-- Load JS here for greater good =============================-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
  </body>
</html>
